<template>
    <div class="chartAdd">
        <Form :model="chartInfo" :label-width="100">
            <!--轮播图URL-->
            <FormItem label="轮播图" style="margin-top: 10px">
                <Tooltip placement="right" theme="light">
                    <div slot="content">
                        <p>轮播图URL</p>
                        <p style="color: #F00">200个字符以内</p>
                    </div>
                    <Input prefix="md-images"
                           v-model="chartInfo.chartUrl"
                           maxlength="200"
                           show-word-limit
                           placeholder="轮播图URL"
                           style="width: 1000px"
                           clearable/>
                </Tooltip>
            </FormItem>

            <FormItem label="轮播展示" style="margin-top: 10px">
                <img :src="chartInfo.chartUrl" style="width: 300px;height: 144px">
            </FormItem>

            <!--跳转URL-->
            <FormItem label="跳转链接" style="margin-top: 20px">
                <Tooltip placement="right" theme="light">
                    <div slot="content">
                        <p>跳转链接</p>
                        <p style="color: #F00">200个字符以内</p>
                    </div>
                    <Input prefix="ios-redo"
                           v-model="chartInfo.webUrl"
                           placeholder="跳转链接"
                           maxlength="200"
                           show-word-limit
                           style="width: 1000px"
                           clearable/>
                </Tooltip>
            </FormItem>

            <!--轮播图状态-->
            <FormItem label="轮播状态" style="margin-top: 20px">
                <i-switch v-model="chartInfo.status"
                          size="large"
                          :true-value="1"
                          :false-value="0"
                          false-color="#ff4949">
                    <span slot="open">ON</span>
                    <span slot="close" style="font-size: 14px">OFF</span>
                </i-switch>
            </FormItem>

            <FormItem>
                <Button type="primary" v-if="addChartBtnFlag" @click="insertChart">新增轮播图</Button>
                <Button v-if="!addChartBtnFlag">新增轮播图</Button>
            </FormItem>

        </Form>
    </div>
</template>

<script>
    import {checkIsNull} from "@/tools/Null";

    export default {
        name: "",
        components: {},
        data() {
            return {
                chartInfo: {
                    chartId: "",
                    chartUrl: "",
                    webUrl: "",
                    status: 0,
                    showOrder: "",
                },
                //添加幂等
                addChartBtnFlag: true
            }
        },
        methods: {
            check: function () {
                let flag = true;
                let b = checkIsNull(this.chartInfo.chartUrl);
                if (b) {
                    this.$Message.error({
                        background: true,
                        closable: true,
                        duration: 2,
                        content: '轮播图链接不能为空'
                    });
                    flag = false
                }
                let b1 = checkIsNull(this.chartInfo.webUrl);
                if (b1) {
                    this.$Message.error({
                        background: true,
                        closable: true,
                        duration: 2,
                        content: '轮播图跳转链接不能为空'
                    });
                    flag = false
                }
                return flag
            },
            insertChart: function () {
                let b = this.check();
                if (!b) {
                    return
                }
                this.addChartBtnFlag = false
                let data = {
                    chartUrl: this.chartInfo.chartUrl,
                    webUrl: this.chartInfo.webUrl,
                    status: this.chartInfo.status
                }
                this.axios.post(`/home/rotationChart/rotationChart`, data)
                    .then((data) => {
                        if (data.code == 200) {
                            this.$Message.success({
                                background: true,
                                closable: true,
                                duration: 2,
                                content: '轮播图添加成功'
                            });
                            this.addChartBtnFlag = true
                            this.chartInfo.chartUrl = ""
                            this.chartInfo.webUrl = ""
                            this.chartInfo.status = 0

                            this.$emit("chart-add",true)
                            this.Bus.$emit("chart-add",true)
                        }
                    })
            }
        },
        mounted() {
        }
    }
</script>

<style scoped>

</style>